<template>
  <div class="flex w-full min-h-screen flex-col bg-gray-100">
    <header-cmp/>
    <div class="container mx-auto px-4 py-6 flex-grow">
      <div class="flex mb-4">
        <el-input
            v-model="search"
            class="input-with-select w-full md:w-96"
            placeholder="请输入内容"
        >
          <template #append>
            <el-button icon="el-icon-search" @click="init(true)"/>
          </template>
        </el-input>
      </div>

      <el-tree :data="page.records" :props="defaultProps" node-key="id">
        <template #default="{ node, data }">
          <div class="flex items-center w-full">
            <div class="w-40 truncate">{{ data.ask }}</div>
            <div class="ml-auto">
              <el-button
                  size="small"
                  type="text"
                  @click="edit(data)"
              >
                编辑
              </el-button>
              <el-button
                  class="text-red-500"
                  size="small"
                  type="text"
                  @click="init(node, data)"
              >
                删除
              </el-button>
            </div>
          </div>
        </template>
      </el-tree>
    </div>
    <footer-cmp/>
  </div>
</template>
<script>
import {getJson} from "@/assets/http";
import {getPageYmlApi} from "@/assets/api";
import HeaderCmp from "@/views/components/HeaderCmp.vue";
import FooterCmp from "@/views/components/FooterCmp.vue";
import {YmlAddEdit} from "@/index";

export default {
  name: "HomePage",
  components: {HeaderCmp, FooterCmp},
  data() {
    return {
      id: this.$route.query.id,
      page: {
        current: 0,
        size: 10,
        records: [],
      },
      search: "",
      defaultProps: {
        children: 'children',
        label: 'ask'
      },
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init(isReload) {
      if (isReload === true) {
        this.page.current = 0
      }
      let params = {ask: this.search, current: this.page.current + 1, size: this.page.size, parentId: 0};
      let res = await getJson(getPageYmlApi, params)
      if (res.code === 1) {
        this.page = res.data
      }
    },
    edit(data) {
      this.$router.push({
        // name: "HomePage",
        path: YmlAddEdit,
        // params: data,
        query: {id: data.id},
      })
    },

  }
}
</script>

<style scoped lang="less">
</style>
